<template>
  <div class="common-layout">
    <el-container id="container">
      <el-main>
        <div id="condition">
          <el-button type="primary" @click="handleAdd" size="large">新增</el-button>
          <div>
            <el-select v-model="cinemaFilter" placeholder="请选择影院" style="width: 240px" size="large" clearable>
              <el-option v-for="cinema in cinemas" :key="cinema.cId" :label="cinema.cName" :value="cinema.cId"/>
            </el-select>
            <el-input
                v-model="hallNameFilter"
                style="width: 240px"
                placeholder="请输入影厅名称"
                size="large"
                clearable
            />
            <el-button type="success" @click="handleQuery" size="large">查询</el-button>
          </div>
        </div>
        <div id="tableDiv">
          <el-table
              id="table"
              :data="tableData"
              border
              size="large"
              table-layout="fixed"
              style="text-align: center">
            <el-table-column prop="hId" label="影厅ID"/>
            <el-table-column prop="cId" label="所属影院ID"/>
            <el-table-column prop="cName" label="影院名称"/>
            <el-table-column prop="hName" label="影厅名称"/>
            <el-table-column prop="hCapacity" label="影厅容量"/>
            <el-table-column prop="rowNo" label="影厅行数"/>
            <el-table-column prop="lineNo" label="影厅列数"/>
            <el-table-column prop="address" label="影院地址"/>
            <el-table-column label="操作" fixed="right" width="180">
              <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.row)">修改</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>
      <el-footer>
        <div id="pagination">
          <el-pagination
              style="float:right"
              v-model:page-size="pageSize"
              :page-sizes="[5, 10, 20, 50]"
              :current-page="currentPage"
              :disabled="false"
              :total="totalCount"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              background layout="total, sizes, prev, pager, next, jumper"/>
        </div>
      </el-footer>
    </el-container>
    <el-dialog
        v-model="addDialog"
        title="新增影厅"
        width="500"
        align-center
    >
      <el-form
          ref="registerForm"
          label-position="right"
          label-width="auto"
          :model="hall"
          size="large"
          style="max-width: 600px">
        <el-form-item label="影院:" label-position="right">
          <el-select v-model="hall.cId" placeholder="请选择影院" style="width: 240px" clearable>
            <el-option v-for="cinema in cinemas" :key="cinema.cId" :label="cinema.cName" :value="cinema.cId"/>
          </el-select>
        </el-form-item>
        <el-form-item label="影厅名称:" label-position="right">
          <el-input v-model="hall.hName" style="width: 240px"
                    placeholder="请输入影厅名称" clearable/>
        </el-form-item>
        <el-form-item label="影厅容量:" label-position="right">
          <el-input v-model="hall.hCapacity" style="width: 240px"
                    placeholder="请输入影厅容量" clearable/>
        </el-form-item>
        <el-form-item label="影厅行数:" label-position="right">
          <el-input v-model="hall.rowNo" style="width: 240px"
                    placeholder="请输入影厅行数" clearable/>
        </el-form-item>
        <el-form-item label="影厅列数:" label-position="right">
          <el-input v-model="hall.lineNo" style="width: 240px"
                    placeholder="请输入影厅列数" clearable/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="doAdd">新增</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="editDialog" title="修改影厅信息" width="500" align-center>
      <el-form ref="registerForm" label-position="right" label-width="auto" :model="editHall" size="large"
               style="max-width: 600px">
        <el-form-item label="影院:" label-position="right">
          <el-select v-model="editHall.cId" placeholder="请选择影院" style="width: 240px" clearable>
            <el-option v-for="cinema in cinemas" :key="cinema.cId" :label="cinema.cName" :value="cinema.cId"/>
          </el-select>
        </el-form-item>
        <el-form-item label="影厅名称:" label-position="right">
          <el-input v-model="editHall.hName" style="width: 240px" placeholder="请输入影厅名称" clearable/>
        </el-form-item>
        <el-form-item label="影厅容量:" label-position="right">
          <el-input v-model="editHall.hCapacity" style="width: 240px" placeholder="请输入影厅容量" clearable/>
        </el-form-item>
        <el-form-item label="影厅行数:" label-position="right">
          <el-input v-model="editHall.rowNo" style="width: 240px" placeholder="请输入影厅行数" clearable/>
        </el-form-item>
        <el-form-item label="影厅列数:" label-position="right">
          <el-input v-model="editHall.lineNo" style="width: 240px" placeholder="请输入影厅列数" clearable/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="doEdit">修改</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ElNotification, ElMessageBox} from "element-plus";
import {ref, reactive, onMounted} from "vue";
import {request2} from "@/request.js";

const cinemaFilter = ref('');
const hallNameFilter = ref('');
const currentPage = ref(1);
const pageSize = ref(5);
const totalCount = ref(0);
const tableData = reactive([]);
const addDialog = ref(false);
const editDialog = ref(false);

const hall = reactive({
  cId: null,
  hName: null,
  hCapacity: null,
  rowNo: null,
  lineNo: null,
});
const editHall = reactive({
  hId: null,
  cId: null,
  hName: null,
  hCapacity: null,
  rowNo: null,
  lineNo: null,
});
const cinemas = ref([]);

const hallQueryDto = reactive({
  hName: hallNameFilter.value,
  cId: cinemaFilter.value,
  pageNo: currentPage.value,
  pageSize: pageSize.value,
})

const handleQuery = () => {
  // 刷新dto的参数值
  hallQueryDto.hName = hallNameFilter.value;
  hallQueryDto.cId = cinemaFilter.value;
  hallQueryDto.pageNo = currentPage.value;
  hallQueryDto.pageSize = pageSize.value;
  request2({
    url: `/hall/list`,
    method: "post",
    data: hallQueryDto
  }).then(res => {
    if ('200' === res.code && res.data !== null) {
      tableData.splice(0, tableData.length);
      tableData.push(...res.data.list);
      pageSize.value = res.data.pageSize;
      currentPage.value = res.data.pageNo;
      totalCount.value = res.data.totalCount;
    }
  });
};

const handleAdd = () => {
  addDialog.value = true;
};

const doAdd = () => {
  request2({
    url: "/hall/addHall",
    method: "post",
    data: hall
  }).then(res => {
    if ('200' === res.code) {
      ElNotification.success('新增成功');
      addDialog.value = false;
      handleQuery();
    }
  });
};

const handleEdit = (row) => {
  editHall.hId = row.hId;
  editHall.cId = row.cId;
  editHall.hName = row.hName;
  editHall.hCapacity = row.hCapacity;
  editHall.rowNo = row.rowNo;
  editHall.lineNo = row.lineNo;
  editDialog.value = true;

};
const doEdit = () => {
  request2({url: "/hall/updateHall", method: "post", data: editHall}).then(res => {
    if ('200' === res.code) {
      ElNotification.success('修改成功');
      editDialog.value = false;
      handleQuery();
    }
  });
};
const handleDelete = (row) => {
  ElMessageBox.confirm('此操作将永久删除该影厅, 是否继续?', '提示', {
    type: 'warning'
  }).then(() => {
    request2({
      url: `/hall/delete/${row.hId}`,
      method: "post",
      data: null
    }).then(res => {
      if ('200' === res.code) {
        ElNotification.success('删除成功');
        handleQuery();
      }
    });
  });
};

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  handleQuery();
};

const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  currentPage.value = 1;
  handleQuery();
};

const fetchCinemas = () => {
  request2({
    url: "/cinema/selectAll",
    method: "get",
    data: null
  }).then(res => {
    if ('200' === res.code && res.data !== null) {
      cinemas.value.push(...res.data);
    }
  });
};

onMounted(() => {
  fetchCinemas();
  handleQuery();
});
</script>

<style scoped>
.common-layout {
  width: 100%;
  height: 100%;
}

#condition {
  display: flex;
  justify-content: space-between;
}

#tableDiv {
  text-align: center;
}

#pagination {
  float: right;
}
</style>

